

import 'package:bst_web/common/res.dart';

import 'controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mvc/flutter_mvc.dart';
import 'dart:ui' as ui;
import 'market1/controller.dart';

///description:逛市场
class MarketPage extends BasePage<MarketController> {
  final market1Controller = Market1Controller();

  @override
  Widget build(BuildContext context) {

    final isPhone=MediaQuery.of(context).size.shortestSide < 600 ;
    if(!isPhone) {
      return Material(color: Colors.white,child: Center(child: Text("不支持电脑端查看,请手机查看",style: resTextStyle.copyWith(color: const Color(0xff262627),fontSize: 20.sp),),));
    }
    return Material(
      child: Container(
        color: resBackgroundColorF2,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            Container(
              height: 180.dp,
              color: const Color(0xffEB483F),
              width: MediaQuery.of(context).size.width,
            ),
            Positioned.fill(
              child: Column(
                children: [
                  _buildTitle(),

                  // Image.network(
                  //   "https://c-ssl.duitang.com/uploads/blog/202105/04/20210504062111_d8dc3.jpg",
                  //   // "https://ypzj-oss.oss-cn-zhangjiakou.aliyuncs.com/bosutong-img/20221031142258zGny3AtR2kWFcstaewCE.png",
                  //   width: 110,height: 110,
                  //   headers: const {
                  //     'referrer':'never',
                  //     "Access-Control-Allow-Origin":"*",
                  //     "Access-Control-Allow-Methods":'GET,POST,PUT',
                  //     // 'Access-Control-Allow-Headers':'access-control-allow-origin,content-type',
                  //   },
                  // ),
                  Expanded(child: market1Controller.widget)
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  final screens = ["档口列表", "楼层列表"];

  Widget _buildTitle() {
    final item = Container(
      decoration: BoxDecoration(
          color: const Color(0xffCC0B00),
          borderRadius: BorderRadius.circular(4.dp)),
      width: 180.dp,
      height: 30.dp,
      child: Stack(
        children: [
          AnimatedContainer(
            width: 88.dp,
            height: 28.dp,
            duration: Duration(milliseconds: 1200),
            curve: Curves.fastLinearToSlowEaseIn,
            margin: EdgeInsets.only(left: (c.index * 90.dp + 2.dp), top: 1.dp),
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(7.dp)),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: screens.map((e) {
              int thisIndex = screens.indexOf(e);
              final isSelect = c.index == thisIndex;
              final color = isSelect ? Color(0xff302F2F) : Colors.white;
              final fontSize = isSelect ? 14.sp : 12.sp;
              final fontWidget = isSelect ? FontWeight.w600 : FontWeight.w400;
              return GestureDetector(
                onTap: () {
                  c.onTabClick(thisIndex);
                },
                child: Container(
                  width: 88.dp,
                  height: 26.dp,
                  margin: EdgeInsets.only(top: 2.dp),
                  color: const Color(0x01ffffff),
                  child: Center(
                    child: Text(
                      e,
                      style: resTextStyle.copyWith(
                          color: color,
                          fontSize: fontSize,
                          fontWeight: fontWidget),
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );

    return SafeArea(
      bottom: false,
      child: SizedBox(
        height: 40.dp,
        child: Row(
          children: [
            SizedBox(
              width: 11.dp,
            ),
            GestureDetector(
                onTap: () {
                  Navigator.of(context!).pop();
                },
                child: Icon(
                  Icons.arrow_back_ios_outlined,
                  size: 19.dp,
                  color: Colors.white,
                )),
            Expanded(child: Center(child: item)),
            Icon(
              Icons.search_rounded,
              size: 19.dp,
              color: Colors.white,
            ),
            SizedBox(
              width: 15.dp,
            ),
          ],
        ),
      ),
    );
  }
}

// class WebImage extends StatelessWidget{
//   String url;
//   double? width;
//   double? height;
//
//   WebImage(this.url,{ this.width, this.height});
//
//   @override
//   Widget build(BuildContext context) {
//     String _divId = "web_image_" + DateTime.now().toIso8601String();
//     // ignore: undefined_prefixed_name
//     ui.platformViewRegistry.registerViewFactory(
//       _divId,
//           (int viewId) => ImageElement(src: url),
//     );
//     return SizedBox(
//       width: width,
//       height: height,
//       child: HtmlElementView(key: UniqueKey(),
//         viewType: _divId,),
//     );
//   }
// }
